<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/students/notices'}">学生</el-breadcrumb-item>
      <el-breadcrumb-item>学生成绩查询</el-breadcrumb-item>
      <el-breadcrumb-item>个人成绩</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域 -->
    <el-card> 
      <h1 v-if="score.status !== 4" style="margin: 4% 30%">成绩暂时还未公布，请耐心等待！</h1>
      <div v-else>
        <el-row>
          <h1>成绩由指导成绩、互评成绩和答辩成绩三部分构成。<br> 其中指导成绩占比30%, 互评成绩占比30%, 答辩成绩占比40%。 </h1>
        </el-row>
        <el-row> 
            <span>指导成绩: </span> 
            <el-progress :text-inside="true" :stroke-width="40" :format="format" :percentage="score.guideScore"></el-progress>
        </el-row>
        <el-row>
          <span>互评成绩: </span>
          <el-progress :text-inside="true" :format="format" :stroke-width="40" :percentage="score.commentScore" status="success"></el-progress>
        </el-row>
        <el-row>
          <span>答辩成绩: </span>
          <el-progress :text-inside="true" :format="format" :stroke-width="40" :percentage="score.replyScore" status="warning"></el-progress>
        </el-row>
        <el-row>
          <span>最终成绩: </span>
          <el-progress :text-inside="true" :format="format" :stroke-width="40" :percentage="score.finalScore" status="exception"></el-progress>
        </el-row> 
        <el-row>
          <span>教师评语: </span>
          <el-tag>{{score.teacherAdvice}}</el-tag>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {getStudentScore} from '../../axios/score'
  export default {
    name: 'StudentScore',
    data(){
      return {
        score:{},
      }
    },
    created(){
      this.getScore()
    },
    methods:{
      getScore(){
        // 向后端发送请求，获取学生个人成绩
        getStudentScore().then(res => {
          if(res.success){
            this.score = res.data
          } 
        })

        // 模拟数据
        // this.score = {
        //   id: 1,
        //   stuId: '6109118001',
        //   status: 4,
        //   guideScore: 85,
        //   commentScore: 90,
        //   replyScore: 85,
        //   finalScore:87,
        //   teacherAdvice: '继续努力，保持优秀!'
        // }
      },
      format(percentage) {
        return `${percentage} 分`;
      }
    }
  }
</script>

<style scoped>
  .el-row {
    margin-top: 30px;
    margin-left:200px
  }
  .el-row h1 {
    line-height: 40px;
  }
  .el-row span{
    float: left;
    width: 100px;
    line-height: 40px;
    text-align:right;
    font-weight: bold;
    font-size: 20px;
  }
  .el-row .el-progress {
    float: left;
    margin-left: 20px;
    width:600px
  }
  .el-row .el-tag {
    height: 40px;
    margin-left: 20px;
    width: 600px;
    text-align:center;
    border-radius: 50px;
  }
</style>